<template>
  <div>
    <h2>Vuex 状态管理</h2>
    <p>负责管理组件内部的数据</p>
    <p>count === {{ count1 }} === {{count2}}</p>
    <br>
    <button @click="countAddabc">count ++</button>

    <p>city === {{city1}}</p>
    <button @click="changCityabc">you want to go</button>

    <p>msg === {{msg1}}</p>
    <button @click="changMsgabc">点击修改msg</button>

    <p>flag === {{flag1?"我要在家敲代码":"我要出去玩"}}</p>
    <button @click="changFlag(!flag1)">flag --- flag --- flag</button>
  </div>
</template>

<script>
import store from "@/store";
export default {
  data() {
    return {
      count1: store.state.count,
    };
  },
  computed: {
      count2(){
          return this.$store.state.count
      },
      city1(){
          return this.$store.state.city
      },
      msg1(){
          return this.$store.state.msg
      },
      flag1(){
          return this.$store.state.flag
      }
  },
  methods: {
    countAddabc(){
        this.$store.commit("countAdd")
    },
    changCityabc(){
        this.$store.commit("changCity","海南三压")
    },
    changMsgabc(){
        this.$store.commit("changMsg","修改msg的内容")
    },
    changFlag(flag){
        this.$store.commit("changFlag",flag)
    } 
  },
  mounted() {
    console.log(this.$store);
    console.log(store); //只有引入才能直接用 store  不然就是 this.$store
  },
};
</script>